<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2018/5/17
  Time: 22:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://shiro.apache.org/tags" prefix="shiro" %>
<c:set var="contextPath" value="${pageContext.request.contextPath}"></c:set>


<title>供应商 - 档案</title>

<%--<link rel="stylesheet" href="${contextPath}/static/layer/css/layui.css" media="all">--%>
<link rel="stylesheet" href="${contextPath}/static/ace/components/_mod/jquery-ui/jquery-ui.css"/>
<%--<link rel="stylesheet" href="${contextPath}/static/statistics/css/bootstrap-datetimepicker.min.css">--%>
<link rel="stylesheet"
      href="${contextPath}/static/ace/components/bootstrap-datepicker/dist/css/bootstrap-datepicker3.css"/>
<link rel="stylesheet" href="${contextPath}/static/ace/components/_mod/jqgrid/ui.jqgrid.css"/>
<script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.min.js"></script>
<%--<script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.fr.js"></script>--%>
<script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.zh-CN.js"></script>
<script src="${contextPath}/static/statistics/js/vue.js"></script>
<script type="text/javascript" src="${contextPath}/static/countjs/regularYz.js"></script>

<style type="text/css">
    .customBtn {
        line-height: 20px;
        margin-bottom: 3px;
    }

    .btnLine {
        margin-left: 1px;
        margin-top: 8px;
        margin-bottom: 2px;
    }

    @-webkit-keyframes bouncedelay {
        0%, 80%, 100% {
            -webkit-transform: scale(0.0)
        }
        40% {
            -webkit-transform: scale(1.0)
        }
    }

    @keyframes bouncedelay {
        0%, 80%, 100% {
            transform: scale(0.0);
            -webkit-transform: scale(0.0);
        }
        40% {
            transform: scale(1.0);
            -webkit-transform: scale(1.0);
        }
    }

    .autocomplete-suggestions {
        border: 1px solid #999;
        background: #FFF;
        overflow: auto;
    }

    .autocomplete-suggestion {
        padding: 2px 5px;
        white-space: nowrap;
        overflow: hidden;
    }

    .autocomplete-selected {
        background: #F0F0F0;
    }

    .autocomplete-suggestions strong {
        font-weight: normal;
        color: #3399FF;
    }

    @-moz-document url-prefix() {
        fieldset {
            display: table-cell;
        }
    }

    .ui-jqgrid-sortable {
        text-align: center;
    }

    .ui-pg-div{
        display: none;
    }
</style>

<div class="row" id="appAlert">
    <div class="row btnLine">
        <div class="button-len col-sm-12">
            <div style="width: 100%; margin-bottom: 10px;">
                <button class="btn btn-white btn-sm btn-purple customBtn"  v-on:click="addShop">
                    <i class="ace-icon fa fa-plus-circle purple"></i> 新增
                </button>
                <button class="btn btn-white btn-info btn-sm customBtn" id="editShop">
                    <i class="ace-icon fa fa-pencil blue"></i> 修改
                </button>
                <button class="btn btn-white btn-info btn-sm customBtn" id="deleteSupplier">
                    <i class="ace-icon fa fa-key red"></i> 删除
                </button>
                <button class="btn btn-white btn-info btn-sm customBtn" id="">
                    <i class="ace-icon fa fa-key red"></i> 复制
                </button>
                <button class="btn btn-white btn-info btn-sm customBtn" id="">
                    <i class="ace-icon fa fa-key red"></i> 打印
                </button>
                <button class="btn btn-white btn-info btn-sm customBtn" id="">
                    <i class="ace-icon fa fa-key red"></i> 导出
                </button>
                <button class="btn btn-white btn-info btn-sm customBtn" id="">
                    <i class="ace-icon fa fa-key red"></i> 设置
                </button>
                <button class="btn btn-white btn-info btn-sm customBtn" id="">
                    <i class="ace-icon fa fa-key red"></i> 退出
                </button>
            </div>
            <input class="input-sm" type="text" id="" style="margin-left: 0px;"
                   placeholder="关键字">
            <button class="btn btn-sm btn-white btn-info search-len customBtn"
                    onclick="searchShop()">
                <i class="ace-icon fa fa-search orange"></i>搜索
            </button>


            <table>
                <tr>
                    <td><input type="checkbox" name="colModel" id="checkbox_id" value="id@编码" />编码</td>
                    <td><input type="checkbox" name="colModel" id="checkbox_supplierName" value="supplierName@名称" />名称</td>
                    <td><input type="checkbox" name="colModel" id="checkbox_helpCode" value="helpCode@助记码" />助记码</td>
                    <td><input type="checkbox" name="colModel" id="checkbox_contactName" value="operatorWay@联系人" />联系人</td>
                    <td><input type="checkbox" name="colModel" id="checkbox_operatorWay" value="operatorWay@经营方式" />经营方式</td>
                    <td><input type="checkbox" name="colModel" id="checkbox_deliverCycle" value="deliverCycle@送货周期" />送货周期</td>
                    <td><input type="checkbox" name="colModel" id="checkbox_settlementCycle" value="settlementCycle@送货周期" />结账周期</td>
                    <td><input type="checkbox" name="colModel" id="checkbox_monthSettlementDay" value="monthSettlementDay@月结账日期" />月结账日期</td>
                    <td><input type="checkbox" name="colModel" id="checkbox_settlementWay" value="settlementWay@结算方式" />结算方式</td>
                    <td><input type="checkbox" name="colModel" id="checkbox_salesMan" value="salesMan@业务员编码" />业务员编码</td>
                    <td><input type="checkbox" name="colModel" id="checkbox_salesName" value="salesName@业务员编码" />业务员名称</td>
                    <td><input type="checkbox" name="colModel" id="checkbox_mobile" value="mobile@电话" />电话</td>
                    <td><input type="checkbox" name="colModel" id="checkbox_zoneCode" value="zoneName@区域编码" />区域编码</td>
                    <td><input type="checkbox" name="colModel" id="checkbox_zoneName" value="zoneName@区域编码" />区域名称</td>
                    <td><input type="checkbox" name="colModel" id="checkbox_orgCode" value="orgCode@机构编码" />机构编码</td>
                    <td><input type="checkbox" name="colModel" id="checkbox_orgName" value="orgName@机构名称" />机构名称</td>

                </tr>
            </table>
            <div style="margin-top:100px;">
                <button type="button" id="selectAll" class="btn btn-primary btn-min-width">全选</button>
                <button type="button" id="selectNone" class="btn btn-primary btn-min-width">全不选</button>
                <button type="button" id="setDefineShow" class="btn btn-success btn-min-width">确定</button>
                <button type="button" id="cancelBtn" class="btn btn-default btn-min-width">取消</button>
            </div>

        </div>
    </div>
    <!-- 内容数据开始 -->
    <div class="col-xs-12">
        <table id="grid-table"></table>

        <div id="grid-pager"></div>

    </div>

    <!-- 内容数据结束 -->

    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog" style="">
            <div class="modal-content">
                <div class="modal-header" style="font-size: 20px; margin-bottom: -15px;">
                    <h4 class="modal-title" id="myModalLabel">
                        供应商管理 - <span id="alertTitle">新增</span>
                        <small id="smallTitle" class="hide" style="color: red; float: right; margin-top: 10px;">哈哈哈</small>

                    </h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <button class="btn btn-white btn-info btn-sm customBtn btn-xs" type="button" v-on:click="tableShow">基础信息</button>
                        <button class="btn btn-white btn-info btn-sm customBtn btn-xs" type="button" v-on:click="businessLicenseShow">营业执照</button>
                        <button class="btn btn-white btn-info btn-sm customBtn btn-xs" type="button" v-on:click="licenceShow">许可证</button>
                    </div>

                    <div class="row" id="tableDiv">
                        <table class="table">
                            <tbody>
                            <tr>
                                <td style="width: 86px; text-align: right">
                                    编码
                                </td>
                                <td>
                                    <input type="text" class="form-control" id="id" placeholder="新增编码自动生产" readonly="readonly" style="width: 150px; height: 20px;">
                                </td>
                                <td style="width: 86px; text-align: right">
                                    名称
                                </td>
                                <td>
                                    <input type="text" class="form-control" id="supplierName" placeholder="名称" style="width: 150px; height: 20px;">
                                </td>
                            </tr>

                            <tr>
                                <td style="width: 86px; text-align: right">
                                    联系人
                                </td>
                                <td>
                                    <input type="text" class="form-control" id="contactName" placeholder="联系人" style="width: 150px; height: 20px;">
                                </td>
                                <td style="width: 86px; text-align: right">
                                    助记码
                                </td>
                                <td>
                                    <input type="text" class="form-control" id="helpCode" placeholder="助记码" style="width: 150px; height: 20px;">
                                </td>
                            </tr>

                            <tr>
                                <td style="width: 86px; text-align: right">
                                    手机号码
                                </td>
                                <td>
                                    <input type="text" class="form-control" id="phone" placeholder="手机号码" style="width: 150px; height: 20px;">
                                </td>
                                <td style="width: 86px; text-align: right">
                                    电话
                                </td>
                                <td>
                                    <input type="text" class="form-control" id="mobile" placeholder="电话" style="width: 150px; height: 20px;">
                                </td>
                            </tr>

                            <tr>
                                <td style="width: 86px; text-align: right">
                                    地址
                                </td>
                                <td>
                                    <input type="text" class="form-control" id="address" placeholder="地址" style="width: 150px; height: 20px;">
                                </td>
                                <td style="width: 86px; text-align: right">
                                    传真
                                </td>
                                <td>
                                    <input type="text" class="form-control" id="fax" placeholder="传真" style="width: 150px; height: 20px;">
                                </td>
                            </tr>

                            <tr>
                                <td style="width: 86px; text-align: right">
                                    邮编
                                </td>
                                <td>
                                    <input type="text" class="form-control" id="zipCode" placeholder="邮编" style="width: 150px; height: 20px;">
                                </td>
                                <td style="width: 86px; text-align: right">
                                    电子邮件
                                </td>
                                <td>
                                    <input type="text" class="form-control" id="email" placeholder="电子邮件" style="width: 150px; height: 20px;">
                                </td>
                            </tr>

                            <tr>
                                <td style="width: 86px; text-align: right">
                                    经营方式
                                </td>
                                <td>
                                    <select class="form-control" id="operatorWay" style="width: 150px; height: 20px;">
                                        <option selected="selected" value="A">购销</option>
                                        <option value="C">联营</option>
                                        <option value="F">扣率代销</option>
                                    </select>
                                </td>
                                <td style="width: 86px; text-align: right">
                                    业务员
                                </td>
                                <td>
                                    <input type="text" class="form-control" id="salesMan" placeholder="业务员" style="width: 150px; height: 20px;">
                                </td>
                            </tr>


                            <tr>
                                <td style="width: 86px; text-align: right">
                                    区域
                                </td>
                                <td>
                                    <select class="form-control" id="zoneCode" style="width: 150px; height: 20px;">
                                        <option selected="selected" value="01">东北</option>
                                        <option value="02">西南</option>
                                        <option value="03">东南</option>
                                        <option value="04">西北</option>
                                        <option value="05">。。。。。</option>
                                        <option value="08">汇源果汁</option>
                                        <option value="QY">其它区域</option>

                                    </select>
                                </td>
                                <td style="width: 86px; text-align: right">
                                    冻结账款
                                </td>
                                <td>
                                    <select class="form-control" id="freezeAccounts" style="width: 150px; height: 20px;">
                                        <option selected="selected" value="0">正常</option>
                                        <option value="1">冻结</option>
                                    </select>
                                </td>
                            </tr>


                            <tr>
                                <td style="width: 86px; text-align: right">
                                    结算方式
                                </td>
                                <td>
                                    <select class="form-control" id="settlementWay" style="width: 150px; height: 20px;">
                                        <option selected="selected" value="0">临时指定</option>
                                        <option value="1">货到付款</option>
                                        <option value="2">指定账期</option>
                                        <option value="3">指定日期</option>
                                    </select>
                                </td>
                                <td style="width: 86px; text-align: right">
                                    冻结业务
                                </td>
                                <td>
                                    <select class="form-control" id="freezeBusiness" style="width: 150px; height: 20px;">
                                        <option selected="selected" value="0">正常</option>
                                        <option value="1">冻结</option>
                                    </select>
                                </td>
                            </tr>

                            <tr>
                                <td style="width: 86px; text-align: right">
                                    送货周期
                                </td>
                                <td>
                                    <input type="text" class="form-control" id="deliverCycle" value="7" placeholder="7" style="width: 150px; height: 20px;">
                                </td>
                                <td style="width: 86px; text-align: right">
                                    开户行
                                </td>
                                <td>
                                    <input type="text" class="form-control" id="bankOfDeposit" placeholder="开户行" style="width: 150px; height: 20px;">
                                </td>
                            </tr>

                            <tr>
                                <td style="width: 86px; text-align: right">
                                    结账周期
                                </td>
                                <td>
                                    <input type="text" class="form-control" id="settlementCycle" value="30" readonly="readonly" placeholder="30" style="width: 150px; height: 20px;">
                                </td>
                                <td style="width: 86px; text-align: right">
                                    帐号
                                </td>
                                <td>
                                    <input type="text" class="form-control" id="account" placeholder="帐号" style="width: 150px; height: 20px;">
                                </td>
                            </tr>

                            <tr>
                                <td style="width: 86px; text-align: right">
                                    月结账日期
                                </td>
                                <td>
                                    <input type="text" class="form-control" id="monthSettlementDay" value="30" readonly="readonly" placeholder="30" style="width: 150px; height: 20px;">
                                </td>
                                <td style="width: 86px; text-align: right">
                                    营业执照号
                                </td>
                                <td>
                                    <input type="text" class="form-control" id="businessLicenseNo" placeholder="营业执照号" style="width: 150px; height: 20px;">
                                </td>
                            </tr>

                            <tr>
                                <td style="width: 86px; text-align: right">
                                    备注
                                </td>
                                <td>
                                    <input type="text" class="form-control" id="remark" placeholder="请输入名称" style="width: 150px; height: 20px;">
                                </td>
                                <td style="width: 86px; text-align: right">
                                    注册类型
                                </td>
                                <td>
                                    <select class="form-control" id="registerWay" style="width: 150px; height: 20px;">
                                        <option selected="selected" value="1">国有</option>
                                        <option value="2">民营</option>
                                        <option value="3">合资</option>
                                        <option value="4">外资</option>
                                        <option value="5">个体</option>
                                    </select>
                                </td>
                            </tr>

                            <tr>
                                <td style="width: 86px; text-align: right">
                                    采购默认价
                                </td>
                                <td>
                                    <select class="form-control" style="width: 150px; height: 20px;">
                                        <option selected="selected" value="0">进货价</option>
                                        <option value="2">零售价</option>
                                        <option value="6">约定价格</option>
                                        <option value="4">最近进价</option>
                                    </select>
                                </td>
                                <td style="width: 86px; text-align: right">
                                    税务登记号
                                </td>
                                <td>
                                    <input type="text" class="form-control" id="taxRegistrationNo" placeholder="请输入名称" style="width: 150px; height: 20px;">
                                </td>
                            </tr>

                            <tr>
                                <td style="width: 86px; text-align: right">
                                    所属机构
                                </td>
                                <td>
                                    <input type="text" class="form-control" id="orgCode" placeholder="请输入名称" style="width: 150px; height: 20px;">
                                </td>
                                <td style="width: 86px; text-align: right">
                                    户名
                                </td>
                                <td>
                                    <input type="text" class="form-control" id="userName" placeholder="请输入名称" style="width: 150px; height: 20px;">
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>

                    <div class="row hide" id="businessLicenseDiv">
                        <div style="margin:10px auto;border:1px solid #000;width:320px;height:240px;">
                            <img id="showImageInfoImg" style="width:320px;height:240px;" src="" alt="..." class="img-thumbnail">
                        </div>
                        <p style="font-size: 12px; text-align: center;">图片显示(图片窗口大小为320*240，上传图片最佳宽高比例为4：3,图片大小限制在300K以内)</p>
                        <div style="margin-top: 10px; text-align: center;">
                            <input type="file" name="file" id="image_file_input" class="inputfile hide"/>
                            <label for="image_file_input"><i class="ace-icon fa fa-folder-open"></i> 请选择图片</label>
                        </div>
                        <div style="margin-top: 10px; text-align: center;">
                            <button class="btn btn-white btn-info btn-sm customBtn btn-xs" type="button" v-on:click="submitImg">上传</button>
                            <button class="btn btn-white btn-info btn-sm customBtn btn-xs" type="button" v-on:click="">删除</button>
                        </div>
                    </div>

                    <div class="row hide" id="licenceDiv">
                        <div style="margin:10px auto;border:1px solid #000;width:320px;height:240px;">
                            <img id="showImageInfoImg1" style="width:320px;height:240px;" src="" alt="..." class="img-thumbnail">
                        </div>
                        <p style="font-size: 12px; text-align: center;">图片显示(图片窗口大小为320*240，上传图片最佳宽高比例为4：3,图片大小限制在300K以内)</p>
                        <div style="margin-top: 10px; text-align: center;">
                            <input type="file" name="file" id="image_file_input1" class="inputfile hide"/>
                            <label for="image_file_input"><i class="ace-icon fa fa-folder-open"></i> 请选择图片</label>
                        </div>
                        <div style="margin-top: 10px; text-align: center;">
                            <button class="btn btn-white btn-info btn-sm customBtn btn-xs" type="button" v-on:click="submitImg1">上传</button>
                            <button class="btn btn-white btn-info btn-sm customBtn btn-xs" type="button" v-on:click="">删除</button>
                        </div>
                    </div>


                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default btn-xs" data-dismiss="modal" v-on:click="close">关闭</button>
                    <button type="button" class="btn btn-primary btn-xs" v-on:click="saveSupplier">提交更改</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
</div>

<input type="text" name="fileStr" id="fileStr" style="display:none"/>
<input type="text" name="fileType" id="fileType" style="display:none"/>

<!-- page specific plugin scripts -->
<script type="text/javascript" src="${contextPath}/static/statistics/js/jquery.mockjax.js"></script>
<script type="text/javascript" src="${contextPath}/static/statistics/js/jquery.autocomplete.js"></script>
<script type="text/javascript">

    var grid_selector = "#grid-table";
    var pager_selector = "#grid-pager";
    var colNamesTemp = [];
    var colModelTemp = [];
    var rowData = {
        checkbox: ''
    }


    //    var redisTemp = function () {

    //    }

    var scripts = [null, "${contextPath}/static/ace/components/bootstrap-datepicker/dist/js/bootstrap-datepicker.js", "${contextPath}/static/ace/components/jqGrid/js/jquery.jqGrid.js", "${contextPath}/static/ace/components/jqGrid/js/i18n/grid.locale-cn.js", "${contextPath}/static/layer/layer.js", null]
    $('.page-content-area').ace_ajax('loadScripts', scripts, function () {
        jQuery(function ($) {

            $("#selectAll").click(function () {// 全选，为防止只生效一次的问题，用prop不用attr
                $("input[name='colModel']").prop("checked",true);
            })
            $("#selectNone").click(function () {// 全不选
                $("input[name='colModel']").prop("checked",false);
            })
            $("#setDefineShow").click(function () {// 保存到localStorage
                jQuery(grid_selector).GridUnload();
                colModelTemp = [];
                colNamesTemp = [];
                var that = this;
                var chk_value =[];
                $('input[name="colModel"]:checked').each(function(){
                    chk_value.push($(this).val());
                });
                if(chk_value.length==0){
                    layer.msg("你还没有选择任何内容！");
                }else {
                    var checkbox = ''

                    for(var i=0,len=chk_value.length;i<len;i++){
                        var v1 = chk_value[i].split('@')[0];
                        if (i == chk_value.length -1){
                            checkbox += v1;
                        }else {
                            checkbox += v1+',';
                        }
                    }
                    rowData.checkbox = checkbox;

                   reload()


                }
            })

            var dataLoading = function () {
                var that = this;
                var chk_value =[];
                $('input[name="colModel"]:checked').each(function(){
                    chk_value.push($(this).val());
                });
                if(chk_value.length==0){
                    alert("你还没有选择任何内容！");
                }else{
                    var colNames = '["1",'
                    for(var i=0,len=chk_value.length;i<len;i++){
//                            var v1 = chk_value[i].split('@')[0];
                        var v2 = chk_value[i].split('@')[1];
                        if (i == chk_value.length -1){
                            colNames += '"'+v2+'"';
                        }else {
                            colNames += '"'+v2+'",';
                        }
                    }
                    colNames += ']';
                    console.log(JSON.parse(colNames))

                    colNamesTemp = JSON.parse(colNames)

                    var colModel = '['

                        + '{"name":"1","label":"1","index":"1","key":true,"hidden":true}';

                    for(var i=0,len=chk_value.length;i<len;i++){
                        var v1 = chk_value[i].split('@')[0];
                        var v2 = chk_value[i].split('@')[1];
                        colModel += ',{"name":"'+v1+'","label":"'+v2+'","index":"'+v1+'"}';
                    }
                    colModel += ']';

//                    console.log(colModel)
                    colModelTemp = JSON.parse(colModel)

                    jQuery(grid_selector).jqGrid({
                        //direction: "rtl",
                        //subgrid options
                        subGrid: false,
                        url: "${contextPath}/ktPurchase/getSupplierListByPage",
                        //data: grid_data,
                        datatype: "json",
                        mtype: 'POST',
                        height: 300,
                        colNames: colNamesTemp,
                        colModel: colModelTemp,
                        rownumbers: true, //自动行数
//                        width:"1000",
                        autowidth:true,  //宽度自适应
//                        height:"100%",   //高度自适应
                        rowNum : 10,//一页显示多少条
                        rowList : [ 10, 20, 30 ],//可供用户选择一页显示多少条
                        pager : 'pager_selector',//表格页脚的占位符(一般是div)的id
                        sortname : 'gmtModifiedStr',//初始化的时候排序的字段
                        sortorder : "desc",//排序方式,可选desc,asc
                        mtype : "post",//向后台请求数据的ajax的类型。可选post,get
                        viewrecords : true,
                        altRows: true,

//                toppager: true,

                        multiselect: false,
                        //multikey: "ctrlKey",
                        multiboxonly: true,

                        loadComplete: function () {
                            var table = this;
                            setTimeout(function () {
                                styleCheckbox(table);

                                updateActionIcons(table);
                                updatePagerIcons(table);
                                enableTooltips(table);
                            }, 0);
                        },

                        editurl: "${contextPath}/ktPurchase/saveSupplier",//nothing is saved
                        caption: "档案信息",
                        jsonReader: {
                            root: "recordList",
                            page: "currentPage",
                            total: "pageCount",
                            records: "recordCount"
                        }
                    });

                }
            }

            var redisTemp = function () {
                layer.load(1);
                $.ajax({
                    url: '${contextPath}/ktPurchase/redisTemp',
                    type: 'post',
                    data: rowData,
                    success: function (data) {
                        layer.closeAll('loading');
                        if (data.success == false){
                            layer.msg("获取出错："+data.message)
                            return
                        }
                        var dataArray = data.data;
                        if (dataArray.length == 0){
                            layer.msg("查询没有数据")
                            return
                        }
                        $("input[name='colModel']").prop("checked",false);

                        var array = dataArray.split(',');
                        console.log(array);
                        var checkbox = '#checkbox_';
                        for (var i=0,len=array.length;i<len;i++) {
                            var checkboxID = checkbox+array[i];
//                            console.log(checkboxID);
                            $(checkboxID).prop("checked", true);

                        }
                        dataLoading();
                    },
                    error: function (error) {
                        layer.closeAll('loading')
                    }
                })
            }

            redisTemp();





            var parent_column = $(grid_selector).closest('[class*="col-"]');
            //resize to fit page size
            $(window).on('resize.jqGrid', function () {
                $(grid_selector).jqGrid('setGridWidth', parent_column.width());
            })

            //resize on sidebar collapse/expand
            $(document).on('settings.ace.jqGrid', function (ev, event_name, collapsed) {
                if (event_name === 'sidebar_collapsed' || event_name === 'main_container_fixed') {
                    //setTimeout is for webkit only to give time for DOM changes and then redraw!!!
                    setTimeout(function () {
                        $(grid_selector).jqGrid('setGridWidth', parent_column.width());
                    }, 20);
                }
            })


            $(window).triggerHandler('resize.jqGrid');//trigger window resize to make the grid get the correct size

            /**
             * 修改某条信息
             */
            $("#editShop").click(function () {
                var id = $(grid_selector).jqGrid('getGridParam', 'selrow');
                if (!id) {
                    $.jgrid.info_dialog("提示：", "请选择一条信息");
                    return;
                }

                var rowData = $(grid_selector).jqGrid('getRowData', id);
//                console.log(rowData);
//                layer.load(1);
                getSupplier(rowData);
                reload();

            });

            /**
             * 删除某条数据
             */
            $("#deleteSupplier").click(function () {
                var id = $(grid_selector).jqGrid('getGridParam', 'selrow');
                if (!id) {
                    $.jgrid.info_dialog("提示：", "请选择一条信息");
                    return;
                }
//询问框
                layer.confirm('将会把这条供应商数据删除', {
                    btn: ['确定', '取消'] //按钮
                }, function () {
                    var rowData = $(grid_selector).jqGrid('getRowData', id);
                    queryModel.id = rowData.id;
                    layer.load(1);
                    $.ajax({
                        url: '${contextPath}/ktPurchase/deleteSupplier',
                        type: 'post',
                        data: queryModel,
                        dataType: 'json',
                        success: function (data) {
                            layer.closeAll('loading');
                            if (data.success) {
                                layer.msg('删除成功', {icon: 1});

                            } else {
                                layer.msg(data.message);
                            }
                            reload();

                        },
                        error: function (error) {
                            layer.closeAll('loading');
                            $.jgrid.info_dialog("提示：", "服务器异常，稍后再试");
                        }

                    })

                }, function () {
                });
            });



        });
    });
</script>
<script src=${contextPath}/static/layer/layui.all.js></script>
<script type="text/javascript">
    $("#id").show();
    var img64 = "";
    $("#showImageInfoImg").attr("src", img64);
    $("#showImageInfoImg1").attr("src", img64);

    var laypage = layui.laypage,
        layer = layui.layer
    laydate = layui.laydate;

    var queryModel = {
        //分页参数
        page: '1',
        rows: '10',
        //图片参数
        fileStr: '',
        fileType: '',
        fileStart: '',
        supplierName: '',
        state: '',
        createTime: '',
        createUser: '',
        modifyTime: '',
        modifyUser: '',
        contactName: '',
        mobile: '',
        helpCode: '',
        phone: '',
        fax: '',
        email: '',
        zipCode: '',
        operatorWay: '',
        salesMan: '',
        zoneCode: '',
        settlementWay: '',
        freezeAccounts: '',
        freezeBusiness: '',
        deliverCycle: '',
        settlementCycle: '30',
        monthSettlementDay: '30',
        remark: '',
        registerWay: '',
        orgCode: '',
        bankOfDeposit: '',
        account: '',
        businessLicenseNo: '',
        taxRegistrationNo: '',
        userName: '',
        businessLicenseImage: '',
        licenseImage: '',
        defaultPurchaseWay: '',
        guaranteeQuota: '',
        discountRate: ''
    }

    var app = new Vue({
        el: '#appAlert',
        data: {
            objects: [],
        },
        methods: {
            tableShow: function () {
                $("#alertTitle").html("新增")
                $("#businessLicenseDiv").addClass("hide")
                $("#licenceDiv").addClass("hide")
                $("#tableDiv").removeClass("hide")
            },
            businessLicenseShow: function () {
                $("#alertTitle").html("营业执照")
                $("#tableDiv").addClass("hide")
                $("#licenceDiv").addClass("hide")
                $("#businessLicenseDiv").removeClass("hide")
            },
            licenceShow: function () {
                $("#alertTitle").html("许可证")
                $("#tableDiv").addClass("hide")
                $("#businessLicenseDiv").addClass("hide")
                $("#licenceDiv").removeClass("hide")
            },
            saveSupplier: function () {
                $("#smallTitle").addClass("hide")
                $("#showImageInfoImg").attr("src",img64)
                $("#showImageInfoImg1").attr("src",img64)
                queryObjects()
            },
            addShop: function () {
                var rowData = {}
                editShop(rowData)
            },
            submitImg: function () {
                submitImg("1")
            },
            submitImg1: function () {
                submitImg("2")
            },
            close: function () {
                $("#alertTitle").html("新增")
                $("#businessLicenseDiv").addClass("hide")
                $("#licenceDiv").addClass("hide")
                $("#tableDiv").removeClass("hide")
                $("#smallTitle").addClass("hide")
                $("#showImageInfoImg").attr("src",img64)
                $("#showImageInfoImg1").attr("src",img64)
            }
        }
    });


    var submitImg = function (fileStart) {
        var id = $("#id").val();
        var fileType = $("#fileType").val();
        if (fileType == "") {
            $("#smallTitle").html("提示：请选择上传图片");
            $("#smallTitle").removeClass("hide");
            return;
        }

        if (!id){
            $("#smallTitle").html("提示：没有基础信息绑定");
            $("#smallTitle").removeClass("hide");
            return;
        }

        var imageFile = $("#image_file_input")[0].files[0];

        if (imageFile.size > 524288) {
            $("#smallTitle").html("封面图片不得大于512KB");
            $("#smallTitle").removeClass("hide");
            return
        }

        var fileStr = $("#fileStr").val();
        var index = fileStr.indexOf("base64,");

        if (index > 0) {
            fileStr = fileStr.substring(index + 7);
            var fileType = $("#fileType").val();
            fileType = fileType.substring(6);
            $("#fileStr").val(fileStr);
            $("#fileType").val(fileType);
        }
        queryModel.fileStr = $("#fileStr").val();
        queryModel.fileType = $("#fileType").val();
        queryModel.fileStart = fileStart;

        console.log(queryModel);
        //return
//        formData["text"] = $('#summernote').summernote("code");
//        formData["cloudId"] = $("#cloudlingId").val();
//        formData["firstUserId"] = $("#firstUserId").val();
//        formData["endUserId"] = $("#endUserId").val();
        // console.log(formData)
        //return
        layer.load(1);
        $.ajax({
            type: 'POST',
            url: '${contextPath}/ktPurchase/submitImg',
            data: queryModel,
            dataType: 'json',
            success: function (data) {
                layer.closeAll('loading');
                if (data.success == false){
                    $("#smallTitle").html(data.message);
                    return
                }
                $("#smallTitle").html(data.message);
                $("#smallTitle").removeClass("hide");
                var dataArray = data.data;
            },
            error: function (result) {
                layer.closeAll('loading');
                $("#smallTitle").html("上传失败！");
                $("#smallTitle").removeClass("hide");
            }
        });
    }

    var getSupplier = function (rowData) {
        queryModel.id = rowData.id;
        layer.load(1)
        $.ajax({
            url: '${contextPath}/ktPurchase/getSupplier',
            type: 'post',
            data: queryModel,
            success: function (data) {
                layer.closeAll('loading');
                if (data.success == false){
                    layer.msg("获取出错："+data.message)
                    return
                }
                var dataArray = data.data;
                if (dataArray.length == 0){
                    layer.msg("查询没有数据")
                    return
                }
                console.log(dataArray)
                editShop(dataArray);
            },
            error: function (error) {
                layer.closeAll('loading')
            }
        })
    };


    var getObjects = function (queryModel) {
        // console.log(queryModel)
        layer.load(1)
        $.ajax({
            url: '${contextPath}/ktPurchase/saveSupplier',
            type: 'post',
            data: queryModel,
            success: function (data) {
                layer.closeAll('loading');
                if (data.success == false){
                    layer.msg("获取出错："+data.message)
                    return
                }
//                var dataArray = data.data;
//                if (dataArray.length == 0){
//                    layer.msg("查询没有数据")
//                    return
//                }

                $('#myModal').modal('hide');
                layer.msg("提示："+data.message);
                reload();
            },
            error: function (error) {
                layer.closeAll('loading')
            }
        })
    };
    var queryObjects = function () {
        queryModel.supplierName = $("#supplierName").val();
        queryModel.state = $("#state").val();
        queryModel.createTime = $("#createTime").val();
        queryModel.createUser = $("#createUser").val();
        queryModel.modifyTime = $("#modifyTime").val();
        queryModel.modifyUser = $("#modifyUser").val();
        queryModel.contactName = $("#contactName").val();
        queryModel.mobile = $("#mobile").val();
        queryModel.helpCode = $("#helpCode").val();
        queryModel.phone = $("#phone").val();
        queryModel.fax = $("#fax").val();
        queryModel.email = $("#email").val();
        queryModel.zipCode = $("#zipCode").val();
        queryModel.operatorWay = $("#operatorWay").val();
        queryModel.salesMan = $("#salesMan").val();
        queryModel.zoneCode = $("#zoneCode").val();
        queryModel.settlementWay = $("#settlementWay").val();
        queryModel.freezeAccounts = $("#freezeAccounts").val();
        queryModel.freezeBusiness = $("#freezeBusiness").val();
        queryModel.deliverCycle = $("#deliverCycle").val();
//        queryModel.settlementCycle = $("#settlementCycle").val();
        queryModel.monthSettlementDay = $("#monthSettlementDay").val();
        queryModel.remark = $("#remark").val();
        queryModel.registerWay = $("#registerWay").val();
        queryModel.orgCode = $("#orgCode").val();
        queryModel.bankOfDeposit = $("#bankOfDeposit").val();
        queryModel.account = $("#account").val();
        queryModel.businessLicenseNo = $("#businessLicenseNo").val();
        queryModel.taxRegistrationNo = $("#taxRegistrationNo").val();
        queryModel.userName = $("#userName").val();
        queryModel.businessLicenseImage = $("#businessLicenseImage").val();
        queryModel.licenseImage = $("#licenseImage").val();
        queryModel.defaultPurchaseWay = $("#defaultPurchaseWay").val();
        queryModel.guaranteeQuota = $("#guaranteeQuota").val();
        queryModel.discountRate = $("#discountRate").val();

        getObjects(queryModel)
    }


    $('#beginTime').datetimepicker({
        language: 'zh-CN',
        weekStart: 1,
        todayBtn: 1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        forceParse: 0,
        minView: 2,
        showMeridian: 1,
        format: "yyyy-mm-dd",
//        startDate:new Date(),
    });


    $('#endTime').datetimepicker({
        language: 'zh-CN',
        weekStart: 1,
        todayBtn: 1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        forceParse: 0,
        minView: 2,
        showMeridian: 1,
        format: "yyyy-mm-dd",
//        startDate:new Date(),
    });

    /**
     * 弹窗内容
     * @param rowData
     */
    var editShop = function (rowData) {
//        console.log(rowData)
        $("#id").val(rowData.id);
        $("#supplierName").val(rowData.supplierName);
        $("#state").val(rowData.state);
        $("#createTime").val(rowData.createTime);
        $("#createUser").val(rowData.createUser);
        $("#modifyTime").val(rowData.modifyTime);
        $("#modifyUser").val(rowData.modifyUser);
        $("#contactName").val(rowData.contactName);
        $("#mobile").val(rowData.mobile);
        $("#helpCode").val(rowData.helpCode);
        $("#phone").val(rowData.phone);
        $("#fax").val(rowData.fax);
        $("#email").val(rowData.email);
        $("#zipCode").val(rowData.zipCode);
        $("#operatorWay").val(rowData.operatorWay);
        $("#salesMan").val(rowData.salesMan);
        $("#zoneCode").val(rowData.zoneCode);
        $("#settlementWay").val(rowData.settlementWay);
        $("#freezeAccounts").val(rowData.freezeAccounts);
        $("#freezeBusiness").val(rowData.freezeBusiness);
        $("#deliverCycle").val(rowData.deliverCycle);
//        $("#settlementCycle").val(rowData.settlementCycle);
//        $("#monthSettlementDay").val(rowData.monthSettlementDay);
        $("#remark").val(rowData.remark);
        $("#registerWay").val(rowData.registerWay);
        $("#orgCode").val(rowData.orgCode);
        $("#bankOfDeposit").val(rowData.bankOfDeposit);
        $("#account").val(rowData.account);
        $("#businessLicenseNo").val(rowData.businessLicenseNo);
        $("#taxRegistrationNo").val(rowData.taxRegistrationNo);
        $("#userName").val(rowData.userName);
//        $("#businessLicenseImage").val(rowData.businessLicenseImage);
//        $("#licenseImage").val(rowData.licenseImage);
        $("#defaultPurchaseWay").val(rowData.defaultPurchaseWay);
        $("#guaranteeQuota").val(rowData.guaranteeQuota);
        $("#discountRate").val(rowData.discountRate);

        var businessLicenseImage = !rowData.businessLicenseImage;
        var licenseImage = !rowData.licenseImage;
        console.log(!licenseImage)
        if (!businessLicenseImage) {
            $("#showImageInfoImg").attr("src", 'http://clouderp.skystorechain.com:20081/'+rowData.businessLicenseImage);
        }
        if (!licenseImage) {
            $("#showImageInfoImg1").attr("src", 'http://clouderp.skystorechain.com:20081/'+rowData.licenseImage);
        }

        $('#myModal').modal('show');
    }

    var input = document.getElementById("image_file_input");
    if (typeof(FileReader) === 'undefined') {
        alert("抱歉，你的浏览器不支持 FileReader，请使用现代浏览器操作！");
        input.setAttribute('disabled', 'disabled');
    } else {
        input.addEventListener('change', readFile, false);
    }

    function readFile() {
        $("#smallTitle").addClass("hide");
        var file = this.files[0];
        if(file == undefined) {
            //layer.msg("发送内容过大，请检查图片和内容");
            $("#showImageInfoImg").attr("src",img64);
            $("#fileStr").val("");
            $("#fileType").val("");
            return;
        }
        //这里我们判断下类型如果不是图片就返回 去掉就可以上传任意文件
        if (!/image\/\w+/.test(file.type)) {
            layer.msg("请确保文件为图像类型");
            return false;
        }
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function (e) {
            $("#fileStr").val(this.result);
            //document.getElementById("fileStr").value = '<img src="'+this.result+'" alt=""/>';
            //img_area.innerHTML = '<div class="sitetip">图片img标签展示：</div><img src="'+this.result+'" alt=""/>';
            //alert($("#fileStr").val());
            $("#fileType").val(file.type);
            //alert(file.type);
            $("#showImageInfoImg").attr("src", this.result);
        }
    }

    var input1 = document.getElementById("image_file_input1");
    //var result =  document.getElementById("fileStr1");
    //var img_area = document.getElementById("img_area");
    if (typeof(FileReader) === 'undefined') {
        alert("抱歉，你的浏览器不支持 FileReader，请使用现代浏览器操作！");
        input.setAttribute('disabled', 'disabled');
    } else {
        input.addEventListener('change', readFile1, false);
    }

    function readFile1() {

        var file = this.files[0];
        if(file == undefined) {
            //layer.msg("发送内容过大，请检查图片和内容");
            $("#showImageInfoImg1").attr("src",img64);
            $("#fileStr").val("");
            $("#fileType").val("");
            return;
        }
        //这里我们判断下类型如果不是图片就返回 去掉就可以上传任意文件
        if (!/image\/\w+/.test(file.type)) {
            layer.msg("请确保文件为图像类型");
            return false;
        }
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function (e) {
            $("#fileStr").val(this.result);
            //document.getElementById("fileStr").value = '<img src="'+this.result+'" alt=""/>';
            //img_area.innerHTML = '<div class="sitetip">图片img标签展示：</div><img src="'+this.result+'" alt=""/>';
            //alert($("#fileStr").val());
            $("#fileType").val(file.type);
            //alert(file.type);
            $("#showImageInfoImg1").attr("src", this.result);
        }
    }

    var reload = function () {
//        $(grid_selector).jqGrid('clearGridData');  //清空表格
        $(grid_selector).jqGrid('setGridParam',{
            url:"${contextPath}/ktPurchase/getSupplierListByPage",
            datatype:'json',
//                    postData:param,
            page:1
        }).trigger("reloadGrid"); //重新载入
    }

</script>
<script type="application/javascript">
    //it causes some flicker when reloading or navigating grid
    //it may be possible to have some custom formatter to do this as the grid is being created to prevent this
    //or go back to default browser checkbox styles for the grid
    function styleCheckbox(table) {
        /**
         $(table).find('input:checkbox').addClass('ace')
         .wrap('<label />')
         .after('<span class="lbl align-top" />')


         $('.ui-jqgrid-labels th[id*="_cb"]:first-child')
         .find('input.cbox[type=checkbox]').addClass('ace')
         .wrap('<label />').after('<span class="lbl align-top" />');
         */
    }


    //unlike navButtons icons, action icons in rows seem to be hard-coded
    //you can change them like this in here if you want
    function updateActionIcons(table) {
        /**
         var replacement =
         {
             'ui-ace-icon fa fa-pencil' : 'ace-icon fa fa-pencil blue',
             'ui-ace-icon fa fa-trash-o' : 'ace-icon fa fa-trash-o red',
             'ui-icon-disk' : 'ace-icon fa fa-check green',
             'ui-icon-cancel' : 'ace-icon fa fa-times red'
         };
         $(table).find('.ui-pg-div span.ui-icon').each(function(){
				var icon = $(this);
				var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
				if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
			})
         */
    }

    //replace icons with FontAwesome icons like above
    function updatePagerIcons(table) {
        var replacement =
            {
                'ui-icon-seek-first': 'ace-icon fa fa-angle-double-left bigger-140',
                'ui-icon-seek-prev': 'ace-icon fa fa-angle-left bigger-140',
                'ui-icon-seek-next': 'ace-icon fa fa-angle-right bigger-140',
                'ui-icon-seek-end': 'ace-icon fa fa-angle-double-right bigger-140'
            };
        $('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function () {
            var icon = $(this);
            var $class = $.trim(icon.attr('class').replace('ui-icon', ''));

            if ($class in replacement) icon.attr('class', 'ui-icon ' + replacement[$class]);
        })
    }

    function enableTooltips(table) {
        $('.navtable .ui-pg-button').tooltip({container: 'body'});
        $(table).find('.ui-pg-div').tooltip({container: 'body'});
    }
</script>

